<template>
  <div>
    <p>我是app</p>
    <button @click="count++">{{ count }}</button>
    <button @click="visible=true">弹框</button>
    <Teleport to="#app">
    <p>我在app里么</p>
      <PopCom ref="pop"  v-if="visible" v-model:visible="visible" :title="'我是弹框标题'" :content="content" v-model="num" ></PopCom>
      <button @click="changeMsg">改变弹框内容</button>
    </Teleport>
    <p>父组件的num:{{ num }}</p>
  <!-- <JsxCom></JsxCom> -->
  </div>
</template>
<script setup>
import {ref,toRef,toRefs,computed,reactive,provide} from 'vue'
import PopCom from './components/PopCom.vue'
// import JsxCom from './components/JsxCom.vue';
const count = ref(100);
provide('count',count)
const pop = ref(null);
const changeMsg = ()=>{
  pop.value.msg = '坏消息'
}

const content = computed(()=>{
  return '我是弹框内容'+count.value
})
const visible = ref(false);
const num  = ref(5);

</script>